<template>
    <div class="content-wrapper">
        <el-row class="content-row">
            <el-col class="height-init" :span="24">
                <div class="container">
                    <el-row class="handle-box">
                        <el-date-picker
                                v-model="query.time"
                                type="datetimerange"
                                range-separator="至"
                                @change="dateChange"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                style="width:380px"
                                :default-time="['00:00:00', '23:59:59']">
                        </el-date-picker>
                        <el-input v-model="query.goodsName" placeholder="商品名称" class="handle-input mr10"></el-input>
                        <el-input v-model="query.orderNo" placeholder="订单编号" class="handle-input mr10"></el-input>
                        <el-input v-model="query.account" placeholder="用户账号" class="handle-input mr10"></el-input>
                        <el-select style="width: 100px" v-model="query.status" class="mr10 ml10" clearable
                                   placeholder="订单状态">
                            <el-option
                                    v-for="item in orderStatusOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                        <el-button type="primary" icon="el-icon-setting" @click="reSetForm">清空</el-button>
                        <el-button type="primary" icon="el-icon-plus" @click="exportInfo">导出</el-button>
                    </el-row>
                    <el-row class="list-table-row">
                        <el-table
                                :data="tableData"
                                border
                                class="table"
                                height="100%"
                                ref="multipleTable"
                                header-cell-class-name="table-header"
                                @selection-change="handleSelectionChange"
                        >
                            <el-table-column prop="orderNo" label="订单编号" align="center"></el-table-column>
                            <el-table-column prop="account" label="用户账号" align="center"></el-table-column>
                            <el-table-column prop="source" width="120px" label="兑换模块" align="center">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.source == 2">星选</span>
                                    <span v-if="scope.row.source == 1">秒杀</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="goodsName" label="商品名称" align="center"></el-table-column>
                            <el-table-column prop="num" label="数量" align="center"></el-table-column>
                            <el-table-column prop="integralNum" label="积分" align="center"></el-table-column>
                            <el-table-column label="当前状态" width="100px" align="center">
                                <template slot-scope="scope">

                                    <span v-if="scope.row.status == 0">待兑换</span>
                                    <span v-if="scope.row.status == 1">兑换完成</span>
                                    <span v-if="scope.row.status == 2">已取消</span>
                                    <span v-if="scope.row.status == 3">兑换失败</span>

                                </template>
                            </el-table-column>                            <el-table-column prop="createTime" align="center" label="下单时间" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    {{renderTime(scope.row.createTime)}}
                                </template>
                            </el-table-column>

                            <el-table-column label="操作" width="300" align="center" fixed="right">
                                <template slot-scope="scope">
                                    <el-button type="text" size="small"
                                               @click="viewDetail(scope.row)">查看详情
                                    </el-button>
                                    <el-button type="text" size="small"
                                               v-if=" scope.row.status == 0 || (scope.row.status ==1 && (scope.row.createTime+86400000)>new Date().getTime() )"
                                               @click="handleCancelStatus(scope.row)">取消订单
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-row>
                    <el-row class="pagination-self">
                        <el-pagination
                                background
                                layout="total, sizes, prev, pager, next"
                                :current-page="query.pageNo"
                                :page-size="query.pageSize"
                                :total="pageTotal"
                                @size-change="handleSizeChange"
                                @current-change="handlePageChange"
                        ></el-pagination>
                    </el-row>
                </div>
            </el-col>
        </el-row>

        <!-- 编辑弹出框 -->
        <el-dialog title="设置身份" :visible.sync="addVisible" width="40%" v-loading.fullscreen.lock="fullscreenLoading">
            <el-form ref="addForm" :model="addForm" :rules="addRules" label-width="100px">
                <el-row style="height: 250px">
                    <el-form-item label="用户身份" prop="identityIds">
                        <el-checkbox-group v-model="addForm.identityIds">
                            <el-checkbox v-for="identy in types" :label="identy.id" :key="identy.name">{{identy.name}}
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="editUser('addForm')">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 编辑弹出框 -->
        <el-dialog title="新增用户" :visible.sync="editVisible" width="30%" v-loading.fullscreen.lock="fullscreenLoading">
            <el-form ref="editForm" :model="editForm" :rules="editRules" label-width="80px">
                <el-row style="height: 250px">
                    <el-form-item label="用户昵称" prop="nickname">
                        <el-input v-model="editForm.nickname"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码" prop="phone">
                        <el-input v-model="editForm.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="用户身份" prop="identityIds">
                        <el-checkbox-group v-model="editForm.identityIds">
                            <el-checkbox v-for="identy in types" :label="identy.id" :key="identy.name">{{identy.name}}
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitUser('editForm')">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    // import { fetchPageList, queryIdentifyList, updateUser, saveUser } from '../../../api/lhtUser/lhtUser'
    import {getPage,cancelStatus} from '../../../../api/mall/order'

    export default {
        name: 'lhtUserList',
        data() {
            return {orderStatusOptions: [{
                    value: '0',
                    label: '待兑换'
                }, {
                    value: '1',
                    label: '兑换完成'
                }, {
                    value: '2',
                    label: '已取消'
                }, {
                    value: '3',
                    label: '兑换失败'
                }],
                query: {
                    goodsName:'',
                    account:'',
                    orderNo:'',
                    startTime:'',
                    endTime:'',
                    status:'',
                    pageNo: 1,
                    pageSize: 20
                },
                outTime:'',
                tableData: [],
                multipleSelection: [],
                addVisible: false,
                editVisible: false,
                pageTotal: 0,
                fullscreenLoading: false,
                types: [],
                addForm: {
                    identityIds: [],
                    id: '',
                },
                addRules: {
                    identityIds: [
                        {required: true, message: '请选择身份', trigger: ['blur', 'change']}
                    ]
                },
                editForm: {
                    identityIds: [],
                    nickname: '',
                    phone: ''
                },
                editRules: {
                    nickname: [
                        {required: true, message: '请输入昵称', trigger: ['blur', 'change']}
                    ],
                    phone: [
                        {required: true, pattern: /^1[34578]\d{9}$/, message: '请输入正确的电话号码', trigger: ['blur', 'change']}
                    ],
                    identityIds: [
                        {required: true, message: '请选择身份', trigger: ['blur', 'change']}
                    ]
                }
            };
        },
        created() {
            this.getData();
        },
        props: ['auths'],
        methods: {
            exportInfo(){
                window.open('/mallOrder/export?startTime='+this.query.startTime+'&endTime='+this.query.endTime+'&goodsName='+this.query.goodsName+"&orderNo="+this.query.orderNo+'&account='+this.query.account+'&status='+this.query.status);
            },
            //提交用户信息
            submitUser(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.fullscreenLoading = true;
                        saveUser(this.editForm).then(res => {
                            console.log(res);
                            if (res.code == '0') {
                                this.fullscreenLoading = false;
                                this.editVisible = false;
                                this.$message({
                                    message: '录入成功',
                                    type: 'success'
                                });
                                this.resetForm('editForm');
                                this.getData();
                            } else {
                                this.fullscreenLoading = false;
                                this.$message({
                                    message: res.msg,
                                    type: 'error'
                                });
                            }
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //录入用户
            addUser() {
                this.resetForm('editForm');
                this.editVisible = true;
            },

            /**
             * 获取列表
             */
            getData() {
                getPage(this.query).then(res => {
                    this.tableData = res.data.records;
                    this.pageTotal = res.data.total || 50;
                });
            },
            /**
             * 弹窗编辑用户身份
             */
            editUserIdentify() {
                if (this.multipleSelection.length > 0) {
                    if (this.multipleSelection.length == 1) {
                        this.resetForm('addForm');
                        this.addForm.identityIds = [];
                        this.addForm.id = this.multipleSelection[0].id;
                        let array = this.multipleSelection[0].identityIds;
                        if (array != null && array.length > 0) {
                            let identy = array.split(",");
                            identy.forEach(element => {
                                this.addForm.identityIds.push(parseInt(element));
                            })
                        }
                        this.addVisible = true;
                    } else {
                        this.$message({
                            message: '只能选择一条记录进行设置!!',
                            type: 'error'
                        });
                    }
                } else {
                    this.$message({
                        message: '请选择记录!',
                        type: 'error'
                    });
                }
            },
            /**
             * 点击修改用户身份
             */
            editUser(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.fullscreenLoading = true;
                        let json = {};
                        json.id = this.addForm.id;
                        let text = "";
                        this.addForm.identityIds.forEach((element, index) => {
                            if (index != 0) {
                                text += ',';
                            }
                            text += element;
                        })
                        json.identityIds = text;
                        updateUser(json).then(res => {
                            console.log(res);
                            if (res.code == '0') {
                                this.fullscreenLoading = false;
                                this.addVisible = false;
                                this.$message({
                                    message: '设置成功',
                                    type: 'success'
                                });
                                this.resetForm('addForm');
                                this.getData();
                            } else {
                                this.fullscreenLoading = false;
                                this.$message({
                                    message: res.msg,
                                    type: 'error'
                                });
                            }
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleCancelStatus(row){
                this.$confirm('取消订单后，用户端将显示订单被取消，请事先与用户沟通后取消？', '提示', {
                    type: 'warning'
                }).then(() => {
                    cancelStatus({id:row.id}).then(res => {
                        let ressult = res.data;
                        if (ressult) {
                            this.$message({
                                message: '取消成功',
                                type: 'success'
                            });
                            this.getData();
                        } else {
                            this.$message({
                                message: '取消失败',
                                type: 'fail'
                            });
                        }
                    })
                })
            },

        // 编辑操作
        viewDetail(row) {
            console.log(row)
            this.addTag('订单详情', '/mall/order/detail/' + row.id, 'orderDetail');
        },
            // 触发搜索按钮
            handleSearch() {
                this.$set(this.query, 'pageNo', 1);
                this.getData();
            },

            // 多选操作
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            // 分页导航
            handlePageChange(val) {
                this.$set(this.query, 'pageNo', val);
                this.getData();
            },
            //分页器
            handleSizeChange(val) {
                this.$set(this.query, 'pageSize', val);
                this.getData();
            }, dateChange(val) {
                if (val != null && val !== undefined && val.length > 0) {
                    this.query.startTime = new Date(val[0]).getTime();
                    this.query.endTime = new Date(new Date(val[1]).setHours(23, 59, 59)).getTime();
                } else {
                    this.query.startTime = null;
                    this.query.endTime = null;
                }
            },reSetForm() {
                this.query = {};
                this.query.pageNo = 1;
                this.query.pageSize = 20;
                this.getData();
            },
        }
    };
</script>

<style scoped>

    .content-wrapper {
        height: 100%;
        overflow-y: hidden;
    }

    .content-row {
        height: 100%;
    }

    .height-init {
        height: 100%;
    }

    .container {
        height: 100%;
    }

    .handle-box {
        height: 6.5%;
    }

    .handle-input {
        width: 120px;
        display: inline-block;
    }

    .list-table-row {
        height: 83%;
    }

    .table {
        width: 100%;
        height: 100%;
        font-size: 14px;
    }

    .red {
        color: #ff0000;
    }

    .mr10 {
        margin-right: 10px;
    }

    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }

    .pagination-self {
        height: 10%;
        text-align: right;
        margin-top: 5px;
    }
</style>
